<template lang="html">
    <div class="bottom">
      <h4>中标公告</h4>
      <div class="bottom-container same-container" v-for="item in detail" @click="toDetail(item.id)">
        <div class="little">
          <div class="title">
            <h2>{{item.title}}</h2>
            <span>{{item.createdAt | timeFormat}}</span>
          </div>
          <div class="content ">
            <p v-html="$options.filters.deleteImgSting(item.content)" class="ellipsis"></p>
          </div>
        </div>
      </div>
      <div class="block" v-show="moreThanPage">
        <el-pagination
          layout="prev, pager, next"
          :total="totalNum"
          @current-change="handleCurrentChange"
          :page-size="pageSize">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import {getGroupData} from 'api/article'
export default {
  created() {
    this._getGroupData()
  },
  data() {
    return {
      detail: [],
      totalNum: 0,
      total: [],
      currentPage: 0,
      pageSize: 6,
      moreThanPage: true
    }
  },
  methods: {
    toDetail(itemId) {
      this.$router.push('/index/win-bids-detail/' + itemId)
    },
    _getGroupData() {
      getGroupData('winbids').then((res) => {
        let data = res.data
        this.total = data
        this.totalNum = data.length
        this.detail = data.slice(0, this.pageSize)
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val - 1
    }
  },
  watch: {
    currentPage(newVal) {
      this.detail = this.total.slice(newVal * this.pageSize, (newVal + 1) * this.pageSize)
    },
    totalNum(newVal) {
      if (newVal <= this.pageSize) {
        this.moreThanPage = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~common/sass/mixin.scss";
.ellipsis{
  @include ellipsis(2);
}
.bottom{
  div{
    margin-top: 10px;
  }
}
.block{
  text-align: center;
}
</style>
